import React from 'react';
import { useChromeHistory, useHistoryStats } from '../hooks/useChromeHistory';
import { HistoryStats } from '../components/HistoryVisualization/HistoryStats';
import { TimeSpentChart } from '../components/HistoryVisualization/TimeSpentChart';
import { ActivityTimeline } from '../components/HistoryVisualization/ActivityTimeline';
import { MostVisitedChart } from '../components/HistoryVisualization/MostVisitedChart';
import { ActivityHeatmap } from '../components/HistoryVisualization/ActivityHeatmap';
import { ChartCard } from '../components/ChartCard';
import { Button } from '../components/Button';
import '../styles/theme.css';
import '../styles/animations.css';
import './App.css';

function App() {
  const { history, loading, error, refetch } = useChromeHistory({ maxResults: 100000 });
  const stats = useHistoryStats(history);

  if (loading) {
    return (
      <div className="history-app">
        <div className="loading">
          <div className="spinner"></div>
          <p>Analyzing your browsing history for longevity insights...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="history-app">
        <div className="error-state">
          <h2>Error Loading History</h2>
          <p>{error}</p>
          <Button onClick={refetch}>Try Again</Button>
        </div>
      </div>
    );
  }

  if (history.length === 0) {
    return (
      <div className="history-app">
        <div className="empty-state">
          <h2>No History Available</h2>
          <p>No browsing history found. Please browse some websites first, then try again.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="history-app">
      <header className="app-header">
        <h1>🌱 Longevity History Analytics</h1>
        <div className="header-actions">
          <Button onClick={() => window.location.href = 'newtab.html'}>← Back</Button>
          <Button onClick={refetch}>🔄 Refresh</Button>
        </div>
      </header>

      <div className="history-content">
        <HistoryStats stats={stats} />

        <ChartCard title="Time Spent per Domain">
          <TimeSpentChart timeSpentByDomain={stats.timeSpentByDomain} limit={15} />
        </ChartCard>

        <ChartCard title="Hourly Activity Pattern">
          <ActivityTimeline hourlyPattern={stats.hourlyPattern} />
        </ChartCard>

        <ChartCard title="Most Visited Sites">
          <MostVisitedChart timeSpentByDomain={stats.timeSpentByDomain} limit={15} />
        </ChartCard>

        <ChartCard title="Weekly Activity Pattern">
          <ActivityHeatmap dailyPattern={stats.dailyPattern} />
        </ChartCard>
      </div>
    </div>
  );
}

export default App;
